<template>
    <MainLayout>
        <v-row class="next-lg mx-auto! my-8">
            <v-col cols="12" sm="12" md="7">
                <Collapse title="All Products" bodyStyle="background: #ffffff;"
                    content="Embroidered Patches, Woven Patches, PVC Patches, MotorcyclePatches, Military Patches, Sports Patches"
                    class="mt-6 mx-2 ">

                    <div class="flex flex-wrap justify-center text-center w-full">
                        <span v-for="item in 8" :key="item"
                            class="whitespace-nowrap text-sm bg-gray-200! px-4 py-2 mx-2 my-2 rounded-lg! ">
                            Manufacturing
                        </span>
                    </div>
                </Collapse>

                <Title class="my-3" title="Custom Embroidered Patches" content="The maximum number of colors a pa">
                    <template #content>
                        The maximum number of colors a pa
                    </template>
                    <template #contentBottom>
                        <EvaluateOther />
                    </template>
                </Title>

                <Collapse title="Step1: Choose Product" content="Custom Embroidered Patches" class="mt-6 mx-2">
                    <ProductList :products="productList" @imageClick="openImage" class="mt-6" />
                </Collapse>

                <Collapse title="Step 2 :Customization" content="" class="mt-6 mx-2">
                    <template #content>
                        <div>
                            <span v-for="i in [`'3' Height x3' Width`, '300 pieces']" class="mr-2!">
                                {{ i }}
                            </span>
                        </div>
                    </template>
                    <ShippingForm class="ml-auto! mt-2 md:w-[100%]!" :show-choose="true" from="shoppingCart" />
                </Collapse>

                <Collapse title="Step3:choose Special options" :content="null" class="mt-6 mx-2">
                    <template #rightText>
                        <div class="text-[14px] text-[#ccc]">
                            please select
                        </div>
                    </template>
                    <template v-for="i in 3">
                        <v-alert class="my-4 bg-gray-50!">
                            <template #title>
                                <span class="font-medium! text-[16px]!">Embroidery Coverage : (Select one
                                    option.)</span>
                            </template>
                            <template #text>
                                <span class="font-medium! text-[12px]!">
                                    Did you know? For intricate designs, 100% Embroidery offers the best appearance. For
                                    cost savings or designs with empty space, consider 50% or 75% embroidery.
                                </span>
                            </template>
                        </v-alert>
                        <ProductList :products="productList" @imageClick="openImage" type="checkbox" />
                    </template>
                </Collapse>
                <Collapse title="Step4: Shipping & Production" class="mt-6 mx-2">
                    <!-- <img src="/images/banner.png" alt="" /> -->
                    <template #content>
                        <div class="flex justify-between items-center">
                            <span class="flex items-center">
                                <img src="/testImgs/icon/transport.png" class="w-8 h-8 mr-2" alt="" srcset="">
                                TExpected delivery:
                                <span class="font-bold flex items-center">
                                    Thu,<span class="ml-2">Standard</span>
                                    <span class="h-[2px] w-5 bg-[#333] mx-2"></span>
                                    28Mon,<span class="ml-2"> Aug 4</span>,<span class="ml-2">Standard</span>
                                </span>
                            </span>
                            <span class="flex items-center ">
                                <!-- <span class="font-bold flex items-center">
                                    Thu,Aug
                                    <span class="h-[2px] w-5 bg-[#333] mx-2"></span>
                                    28Mon,Aug 4,
                                    Standard
                                </span> -->
                            </span>
                            <!-- <span>
                            </span> -->
                        </div>
                    </template>
                    <v-radio-group>
                        <v-radio :label="i + '1'" class="mt-10! my-2 bg-white rounded-lg py-4 w-full! pl-4"
                            :value="i + '1'" v-for="i in 3">
                            <template #label>
                                <div class=" scale-[0.9] transform-origin-left flex items-center w-full!">
                                    <DeliveryShow class="mt-2 mb-4 w-full!" :type="2" />
                                </div>
                            </template>
                        </v-radio>
                    </v-radio-group>
                </Collapse>

                <Collapse title="Step 5 :Payment & Address Details Please select" content="" class="mt-6 mx-2">
                    <div class="bg-gray-50 p-6 rounded-lg ">
                        <!-- <h3 class="text-xl font-bold mb-6">Shipping address</h3> -->

                        <div class="mb-4">
                            <label class="block text-gray-700 mb-2">Shipping address</label>
                            <Input active variant="solo" value="China" class="border-green-500"
                                label="Shipping address" />
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <!-- <label class="block text-gray-700 mb-2">First Name</label> -->
                                <Input placeholder="asdsad" active variant="solo" value="lij" class="border-green-500"
                                    label="First Name" />
                            </div>
                            <div>
                                <!-- <label class="block text-gray-700 mb-2">Last Name</label> -->
                                <Input active variant="solo" placeholder="Last Name" label="Last Name" />
                            </div>
                        </div>

                        <div class="mb-4">
                            <!-- <label class="block text-gray-700 mb-2">Address</label> -->
                            <Input active variant="solo" placeholder="Address" class="border-red-500" label="Address" />
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                            <div>
                                <!-- <label class="block text-gray-700 mb-2">City</label> -->
                                <Input active variant="solo" value="Shanghai" class="border-green-500" label="City" />
                            </div>
                            <div>
                                <!-- <label class="block text-gray-700 mb-2">State</label> -->
                                <Input active variant="solo" placeholder="State" label="State" />
                            </div>
                            <div>
                                <!-- <label class="block text-gray-700 mb-2">Postal Code</label> -->
                                <Input active variant="solo" placeholder="Postal Code" label="Postal Code" />
                            </div>
                        </div>

                        <div class="mb-6">
                            <!-- <label class="block text-gray-700 mb-2">Phone</label> -->
                            <div class="flex">
                                <Select active variant="solo" value="+86" class="w-35 border-green-500"
                                    label="Country Code" />
                                <Input active variant="solo" value="13067237367" class="flex-1 border-green-500 ml-2"
                                    label="Phone" />
                            </div>
                        </div>
                    </div>
                </Collapse>

                <div class="mt-6 mx-2">
                    <v-dialog max-width="500">
                        <template v-slot:activator="{ props: activatorProps }">
                            <v-btn v-bind="activatorProps" elevation="0" color="#39c464"
                                class="w-full! mb-4! text-white ">
                                Submit
                            </v-btn>
                        </template>

                        <template v-slot:default="{ isActive }">
                            <v-card>
                                <h3 class="text-center font-bold mt-4">
                                    Thank you very much for your submission
                                </h3>
                                <v-card-text class="text-center">
                                    <span class="text-gray-500 text-sm">
                                        We'll be in touch with you soon regarding the next steps. We'lave one of our
                                        artists
                                        start on your digital proof right away. Mosofthe time we can get it back to you
                                        within hours. Please makesure to check your email for our reply, Our email
                                        address
                                        is <span class="font-bold text-blue-500">info@example.com</span>
                                    </span>

                                    <div>
                                        <v-btn elevation="0" color="#39c464" class="w-full!! text-white px-10! my-4">
                                            + Add another item
                                        </v-btn>
                                    </div>
                                </v-card-text>
                            </v-card>
                        </template>
                    </v-dialog>
                </div>
            </v-col>
            <v-col cols="12" sm="12" md="5">
                <div class="bg-white overflow-hidden text-black px-3 py-4 mx-2 text-left relative rounded-lg"
                    v-if="false">
                    <div class="font-bold text-center text-2xl">Order Summary</div>
                    <div class="border-b-[1px] border-gray-300 border-solid mt-4"></div>
                    <div class="bg-white px-2 flex rounded-lg pt-0 mb-0">
                        <div class="flex-1">
                            <img src="/testImgs/1.webp" alt="" srcset="" class="w-30! object-cover mr-2" v-img-auto />
                        </div>
                        <div class="w-[80%] text-3 pt-4">
                            <h5 class="mb-2 text-4">Custom Embroidered Patches</h5>
                            <div class="mb-2 text-[15px]"><span class="text-gray-500">Size:</span> 3' Height x3' width
                            </div>
                            <div class="mb-1 flex justify-between text-[15px]">
                                <div>
                                    <span class="text-gray-500">QTY:</span> <span>300 pieces</span>
                                </div>
                                <div>
                                    $106.50
                                    <div class="text-[12px] text-blue-400">$107/price</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="border-b-[1px] border-gray-300 border-solid mb-2"></div>
                    <div class="font-bold">
                        Special Options:
                    </div>
                    <div class="mb-1 flex justify-between items-center" v-for="i in 3">
                        <div class="text-gray-500">
                            Embroidery Coverage: 100%
                        </div>
                        <div>
                            $106.50
                            <div class="text-[12px] text-blue-400">$107/price</div>
                        </div>
                    </div>
                    <div class="w-full py-1 flex justify-between items-center mx-left">
                        <div class="flex items-center mb-2">
                            <span class="font-bold">Total</span>
                        </div>
                        <div class="font-bold">
                            <!-- 删除线 -->
                            <div class="relative inline-block">
                                <div
                                    class="absolute top-[50%] left-[50%] w-[120%] transform -translate-x-[50%] h-[1px] bg-gray-500">
                                </div>
                                $123131.2
                            </div>
                            <div class="text-gray-500 text-[12px] font-normal">
                                $123131.2
                            </div>
                        </div>
                        <span class="font-bold flex items-center justify-center">
                            <img src="/testImgs/icon/50-percent.png" class="w-15 h-15 object-cover inline-block mr-2"
                                alt="折扣标签" />
                            <div class="font-bold">
                                $758
                                <div class="text-blue-400 text-[12px] font-normal">
                                    $123131.2
                                </div>
                            </div>
                        </span>
                    </div>
                    <v-btn elevation="0" color="#39c464" class="w-full! mt-2! text-white">
                        Submit
                    </v-btn>
                </div>

                <!-- 添加订单摘要和商品列表 -->
                <Collapse title="Order Summary" :content="null" :selectShow="false" class="mt-6 mx-2"
                    :defaultOpen="false" :bodyStyle="{ background: '#fff' }" @handleClick="handleClick">
                    <template #rightIcon>
                        <img src="/testImgs/icon/shopping.png" class="w-8 h-8" alt="" srcset="">
                    </template>
                    <!-- <div class="px-2">
                        <div class="text-[13px] py-1">
                            <div class="py-1 flex justify-between items-center  font-200">
                                <span class="text-gray-500">Items sub total ($)</span>
                                <span class="font-bold">$7,090.22</span>
                            </div>
                            <div class="py-1  flex justify-between items-center">
                                <span class="text-gray-500">Shipping</span>
                                <span class="text-green-600 font-bold">free</span>
                            </div>
                            <div class="py-1 flex justify-between items-center">
                                <div class="flex items-center">
                                    <span class="text-gray-500">Discount</span>
                                </div>
                                <span class="font-bold text-red-600 flex items-center justify-center">
                                    <img src="/testImgs/icon/50-percent.png"
                                        class="w-10 h-10 object-cover inline-block mr-2" alt="折扣标签" />
                                    -$758
                                </span>
                            </div>
                            <div class="py-1 flex justify-between items-center ">
                                <span class="text-gray-500">Total</span>
                                <span>
                                    <s class="text-gray-500 mr-2">$1200</s> $6,090.22
                                </span>
                            </div>
                        </div>

                        <div class=" py-4 border-t border-[1px] border-gray-100 text-center ">
                            <v-btn elevation="0" color="#39c464" class="w-full!! text-white px-10!">
                                + Add another item
                            </v-btn>
                            <p class="text-xs text-gray-500 mt-2 text-center">Your custom creation is completed. Just
                                one click
                                to
                                create a
                                new order.</p>
                        </div>
                    </div> -->
                </Collapse>

                <!-- <Collapse title="Order Summary" :content="null" :selectShow="false" class="mt-6 mx-2"
                    :defaultOpen="false">
                    <template #rightIcon>
                        <img src="/testImgs/icon/shopping.png" class="w-8 h-8" alt="" srcset="">
                    </template>
                    <div class="bg-white my-2 py-2 px-2 flex rounded-lg" v-for="i in 3">
                        <div class="flex-1">
                            <img src="/testImgs/1.webp" alt="" srcset="" class="w-30! object-cover mr-2" v-img-auto
                                v-for="i in 3" />
                        </div>
                        <div class="w-[80%]">
                            <h4 class="mb-2">Custom Embroidered Patches</h4>
                            <h5 class="mb-1 text-sm">Size 12.5" x 12.5"</h5>
                            <h5 class="mb-1 text-sm">QTY: 1000 pieces</h5>
                            <h5 class="mb-1 text-sm"> Embroidery Coverage: 100%</h5>
                            <p class="mb-2 text-sm text-gray-500">
                                Black Ballistic Nylon, Merrowed Border, Thread (1-9colors), Velcro Hook w/ Loop
                                Application
                                (Adhesive),Rhinestone, Laser Cut or Hand Cut
                            </p>
                            <div class="flex mb-2 text-sm items-center justify-between">
                                <div class="text-gray-500 flex-1 w-full mr-4">
                                    <span class="font-bold">Standard:</span> Expected delivery: Dec 4 - Dec 7
                                </div>
                                <span> +$90</span>
                            </div>
                            <h4 class="mb-1">
                                $2,241.00
                            </h4>
                            <div class="text-sm text-green-500 mb-4">
                                $2.24/per piece
                            </div>
                            <a class="text-blue mr-4">Edit</a>
                            <a class="text-blue">Delete</a>
                        </div>
                    </div>
                </Collapse> -->
                <Collapse title="Completed orders (0)" :content="'5% Discount For Reorder'" :selectShow="false"
                    class="mt-6 mx-2" :bodyStyle="{ background: '#fff' }">
                    <template #content>
                        <div>
                            <span class="text-red">5%</span> Discount For Reorder
                        </div>
                    </template>
                </Collapse>
                <!-- 保证按时交付 -->
                <div class="mx-2 mt-6 mb-6 bg-white rounded-lg shadow-md overflow-hidden p-4">
                    <div class="flex flex-col items-center justify-center">
                        <h3 class="font-bold mb-2 tex flex items-center">
                            <img src="/transport.png" alt="" class="w-10! h-6! mr-4">
                            Guaranteed On-Time Delivery
                        </h3>
                        <p class="text-sm text-gray-600">With a 99.9% on-time delivery record, we meet our deadline,
                            ensuring your
                            product arrives on time for your event. Our customer support team is ready to assist with
                            any
                            delivery
                            concerns.
                        </p>
                    </div>
                </div>

                <!-- 客户帮助 -->
                <div class="mx-2 mt-6 mb-10 bg-white rounded-lg shadow-md overflow-hidden p-4">
                    <div class="flex  justify-center">
                        <div class="flex-1">
                            <div class="text-sm text-gray-600 text-center!">
                                Hello! If you have any questions, could use some help with your
                                design or
                                just can't decide between options, send me a message here in the chat! I'm here to help.
                            </div>
                            <div class="flex items-center justify-center items-center">
                                <img src="/testImgs/icon/image copy.png" class="w-15 h-12 mr-2 relative" alt=""
                                    srcset="">
                                <div class="w-[80%] bg-[#1D498C] text-5 text-white text-center mt-2 py-2 mb-4">
                                    We're here to help!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </v-col>
        </v-row>
    </MainLayout>
</template>

<script setup lang="ts">
import { MainLayout } from '~/components/MainLayout';
import { Collapse } from '~/components/Collapse';
import { Title } from '~/components/Title';
import EvaluateOther from '~/components/evaluate/evaluateOther.vue';
import { ProductList } from '~/components/ProductList';
import { ShippingForm } from '~/components/ShippingForm';
import DeliveryShow from '~/components/delivery/deliveryShow.vue';
import Input from '~/components/input/input.vue';
import Select from '~/components/input/select.vue';
import { useRouter } from 'vue-router'
const router = useRouter()
const swiperList = [
    './testImgs/1.webp',
    './testImgs/2.webp',
    './testImgs/3.webp',
    './testImgs/5.webp',
    './testImgs/6.webp',
    './testImgs/8.webp',
]

// 转换为产品列表数据
const productList = swiperList.map((img, index) => ({
    id: index + 1,
    name: 'Chenille Patches',
    price: '$12.99',
    imageUrl: img,
    discount: index % 2 === 0, // 每隔一个产品显示折扣标签
}))

const openImage = (index: number) => {
    console.log('打开图片:', index);
    // 这里可以实现打开大图预览的逻辑
}

const handleClick = (index: number) => {
    // openImage(index);
    router.push({
        path: '/shoppingCartAgain',
        query: {
            id: 'index',
        },
    })
}
</script>


<style scoped lang="scss">
:deep(.v-selection-control) {
    width: 100% !important;

    .v-label {
        width: 100% !important;
    }
}

.transform-origin-left {
    transform-origin: left;
}
</style>